!function ($) {
    const reqHeader = $('.reqHeader');//引入header.html的div
    const reqFooter = $('.reqFooter')
    const tbody = $('tbody');
    const noGoods = $('.noGoods');
    const total = $('.total p span');//所有总价
    const checkAll = $('.checkAll');
    const allCheck = $('.allCheck');
    const delCheck = $('.delCheck');
    let idArr = [];
    reqHeader.load('../html/header.html');
    reqFooter.load('../html/footer.html');
    if (!localStorage.getItem('username')) {
        location.href = 'login.html';
        // return false
    } 
    let cartUrl = 'http://10.31.162.37/underline/uniqloAPI/getCartData.php';
    let editUrl = 'http://10.31.162.37/underline/uniqloAPI/editCartList.php';
    let delUrl = 'http://10.31.162.37/underline/uniqloAPI/deleteCartList.php';
    $.ajax({
        url: cartUrl,
        dataType: 'json'
    }).done(data => {
        let str = '';
        $.each(data, function (index, value) {
            str += `
            <tr id="${value.sid}">
            <td class="checkBox"><input type="checkbox" class="ck"></td>
            <td>修改配送方式</td>
            <td class="info">
                <img src="${value.url}" alt="">
                <div>
                    <p>男装 牛仔修身衬衫(水洗产品)(长袖) 432043</p>
                    <p>支持30天无理由退换货</p>
                </div>
            </td>
            <td>
                <p>尺码：185/120C/XXXL</p>
                <p>颜色：64 湖蓝色</p>
            </td>
            <td>
                <p class="aPrice">¥${value.price}</p>
                <p>初上市价格</p>
                <p style="text-decoration: line-through;">¥199.00</p>
            </td>
            <td class="num">
                <p>
                    <span class="minus">-</span>
                    <input type="text" class="pnum" value="${value.buynum}">
                    <span class="plus">+</span>
                </p>
            </td>
            <td class="thePrice">¥${(value.buynum * value.price).toFixed(2)}</td>
            <td class="option">
                <p>移入收藏夹</p>
                <p class="delBtn" >删除</p>
            </td>
            </tr>
            `;
        });
        if(str != ''){
            tbody.html(str);
        }else{
            tbody.html(`<tr class="noGoods">
            <td></td>
            <td></td>
            <td><img src="http://gtd.alicdn.com/tps/i3/T1TvXUXnNjXXXXXXXX-100-100.png" 
            alt="" style="margin-left: 50px;"></td>
            <td>您的购物车还是空的，赶紧行动吧！您可以：</td>
            <td>看看:<a href="./list.html" style="color: blue;">全部商品</a><br>
                看看:<a href="./index.html" style="color: blue;">首页</a></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>`);
        }
        
        const numLess = $('.minus');//减
        const numMore = $('.plus');//增
        const numInput = $('.num p input');//数量
        const delBtn = $('.option .delBtn');//删除按键
        const checkCK = $('.ck');//单款多选框
        let price = 0;
        //遍历增 减 删按钮添加事件 ---------------start
        $.each(numLess, index => {
            //减
            numLess.eq(index).on('click', function () {
                let buynum = +numInput.eq(index).val();
                let sid = $(this).parent().parent().parent().prop('id');
                buynum--;
                if (buynum < 1) {
                    buynum = 1;
                    numInput.eq(index).val(buynum);
                } else {
                    numInput.eq(index).val(buynum)
                }
                $(this).parent().parent().parent().find('.thePrice').html(`￥${parseFloat(buynum * +$(this).parent().parent().parent().find('.aPrice').html().substring(1)).toFixed(2)}`);
                upData(sid, buynum);
                allPrice();
            })
            //增
            numMore.eq(index).on('click', function () {
                let buynum = +numInput.eq(index).val();
                let sid = $(this).parent().parent().parent().prop('id');
                buynum++;
                numInput.eq(index).val(buynum);
                $(this).parent().parent().parent().find('.thePrice').html(`￥${parseFloat(buynum * +$(this).parent().parent().parent().find('.aPrice').html().substring(1)).toFixed(2)}`);
                upData(sid, buynum);
                allPrice();
            });
            //改
            numInput.eq(index).on('change', function () {
                let buynum = $(this).val();
                let sid = $(this).parent().parent().parent().prop('id');
                $(this).parent().parent().parent().find('.thePrice').html(`￥${parseFloat(buynum * +$(this).parent().parent().parent().find('.aPrice').html().substring(1)).toFixed(2)}`);
                upData(sid, buynum);
                allPrice();
            });
            //删
            delBtn.eq(index).on('click', function () {
                let sid = $(this).parent().parent().prop('id');
                $(this).parent().parent().remove();
                $.get(delUrl, { sid }, data => {

                })
            })
        })
        //遍历增 减 删按钮添加事件 ---------------end
        //总价 -----------------start
        checkCK.on('click', function () {
            let count = 0
            price = 0;
            idArr = [];
            checkCK.each(function () {
                if ($(this).prop('checked')) {
                    count++;
                }
                if (count == checkCK.length) {
                    checkAll.prop('checked', true);
                    allCheck.prop('checked', true);
                } else {
                    checkAll.prop('checked', false);
                    allCheck.prop('checked', false);
                }
            })
            allPrice();
        })
        //总价 -------------------end
        //全选 -------------------start
        checkAll.on('click', function () {
            allCheck.prop('checked', $(this).prop('checked'));
            checkCK.each(function () {
                $(this).prop('checked', checkAll.prop('checked'));
                idArr.push($(this).parent().parent().prop('id'));
            });
            if ($(this).prop('checked')) {
                allPrice();
            } else {
                total.html(`¥${0}`);
                idArr = [];
            }
        });
        allCheck.on('click', function () {
            checkAll.prop('checked', $(this).prop('checked'));
            checkCK.each(function () {
                $(this).prop('checked', checkAll.prop('checked'));
                $(this).prop('checked', checkAll.prop('checked'));
                idArr.push($(this).parent().parent().prop('id'))
            });
            if ($(this).prop('checked')) {
                allPrice();
            } else {
                total.html(`¥${0}`);
                idArr = [];
            }
        })
        //全选 ---------------------end
        //删除所选项 ---------------------start
        delCheck.on('click', function () {
            console.log(idArr);
            checkCK.each(function () {
                if ($(this).prop('checked')) {
                    idArr.push($(this).parent().parent().prop('id'));
                }

            });
            idArr.forEach(function (index) {
                $.get(delUrl, { sid: index }, data => {
                })
                $('#' + index).remove();//删除对应的tr
            })
            allPrice();
        })
        //删除所选项 ---------------------end
    });

    //更新
    function upData(sid, buynum) {
        $.ajax({
            url: editUrl,
            data: {
                sid,
                buynum
            }
        }).done(data => {
            // location.reload();
        })
    }
    //计算总价
    function allPrice() {
        const thePrice = $('.thePrice'); //单款总价
        price = 0;
        thePrice.each(function () {
            if ($(this).parent().find('td').first().find('input').prop('checked')) {
                price += parseFloat($(this).html().substring(1));
            }
        });
        total.html(`¥${price.toFixed(2)}`);
    }
    //渲染
    function render() {
        $.ajax({
            url: cartUrl,
            dataType: 'json'
        }).done(data => {
            console.log(data);

            let str = '';
            $.each(data, function (index, value) {
                str += `
                <tr id="${value.sid}">
                <td class="checkBox"><input type="checkbox" class='ck'></td>
                <td>修改配送方式</td>
                <td class="info">
                    <img src="${value.url}" alt="">
                    <div>
                        <p>男装 牛仔修身衬衫(水洗产品)(长袖) 432043</p>
                        <p>支持30天无理由退换货</p>
                    </div>
                </td>
                <td>
                    <p>尺码：185/120C/XXXL</p>
                    <p>颜色：64 湖蓝色</p>
                </td>
                <td>
                    <p>¥${value.price}</p>
                    <p>初上市价格</p>
                    <p>¥199.00</p>
                </td>
                <td class="num">
                    <p>
                        <span>-</span>
                        <input type="text" value="${value.buynum}">
                        <span>+</span>
                    </p>
                </td>
                <td> ¥199.00</td>
                <td class="option">
                    <p>移入收藏夹</p>
                    <p class="delete" >删除</p>
                </td>
                </tr>
                `;
            });
            tbody.html(str);
        });
    }
}(jQuery)